<template>
	<view class="container">
    <view class="head" :style="{ height:  '400rpx', paddingTop:  '180rpx' }">
      <image class="bg" :src="$Config.get('imageUrl')+'/data/head.png'" mode="scaleToFill"/>
      <view class="tabs">
        <view class="item" :class="[current==0?'active':'']" @click="onClickItem(0)">营收数据</view>
        <view class="item" :class="[current==1?'active':'']" @click="onClickItem(1)">成本数据</view>
      </view>
    </view>
    <view class="content">
        <view v-show="current === 0">
          <view class="filter">
            <view class="item" :class="{'active' : filter1 == 4}" @click="filter1Click(4)">每日</view>
            <view class="item" :class="{'active' : filter1 == 3}" @click="filter1Click(3)">月份</view>
            <view class="item" :class="{'active' : filter1 == 2}" @click="filter1Click(2)">季度</view>
            <view class="item" :class="{'active' : filter1 == 1}" @click="filter1Click(1)">年度</view>
          </view>
          <view class="box">
            <view class="title">
              <view>总营收</view>
              <text class="iconfont icon-help arrow" @click="showPopup(0)"></text>
            </view>
            <view class="chart" >
              <l-echart ref="chart1" ></l-echart>
              <view class="customTooltips" :style="{left: chart1.position[0] + 'px',top: chart1.position[1] + 'px'}" v-if="chart1.params.length && chart1.position.length">
                <view v-for="(item,i) in chart1.params" :key="i">
                  <view>
                    <view class="l1">{{item.name}}{{getTableHeader(filter1)}}总营收</view>
                    <view><span>{{getShowNumber(item.value)}}</span></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="box">
            <view class="title">
              <view>总利润</view>
              <text class="iconfont icon-help arrow" @click="showPopup(1)"></text>
            </view>
            <view class="chart">
              <l-echart ref="chart2" ></l-echart>
              <view class="customTooltips" :style="{left: chart2.position[0] + 'px',top: chart2.position[1] + 'px'}" v-if="chart2.params.length && chart2.position.length">
                <view v-for="(item,i) in chart2.params" :key="i">
                  <view>
                    <view>
                      <view class="l1">{{item.axisValue}}{{getTableHeader(filter1)}}{{ item.seriesName }}</view>
                      <view><span>{{getShowNumber(item.value)}}</span></view>
                    </view>

<!--                    <view class="l1">{{}}{{item.seriesName}}:{{item.value}}</view>-->
<!--                    <view >{{ item.seriesName }}：<span>{{item.value}}</span></view>-->
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="box">
            <view class="btns">
              <view class="btn" :class="{'btn-active' : isShop}" @click="chanageShopType(true)">招商</view>
              <view class="btn" :class="{'btn-active' : !isShop}" @click="chanageShopType(false)">商城</view>
            </view>
            <view class="chart">
              <l-echart ref="chart3" ></l-echart>
              <view class="customTooltips" :style="{left: chart3.position[0] + 'px',top: chart3.position[1] + 'px'}" v-if="chart3.params.length && chart3.position.length">
                <view v-for="(item,i) in chart3.params" :key="i">
                  <view>
                    <view :class="[i==0?'l1':'l2']">
                      {{item.axisValue}}
<!--                      {{isShop?'':item.data.name}}-->
                      {{isShop?'招商':'商城'}}总{{ i==0?'营收':'利润' }}</view>
                    <view><span>{{getShowNumber(item.value)}}</span></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
<!--          <view class="box">-->
<!--            <view class="title">商城营收数据</view>-->
<!--            <view class="chartList">-->
<!--              <view class="item" v-for="(item,i) in chart7.data" :key="i">-->
<!--                <image :src="item.icon" class="icon"/>-->
<!--                <view class="name">{{item.name}}</view>-->
<!--                <view class="chart">-->
<!--                  <l-echart :ref="'chart7-'+(i)" ></l-echart>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
          <view class="box box1">
            <view class="title">全国营收数据</view>
<!--            <view class="revenue">-->
<!--              <image :src="$Config.get('imageUrl')+'/data/i4.png'" class="r-img" mode="widthFix"/>-->
<!--              <view class="detail">-->
<!--                <view class="dl1">全国市场渠道销售定价</view>-->
<!--                <view class="dl2">4562</view>-->
<!--              </view>-->
<!--            </view>-->
            <view class="search">
<!--              <select-region ref="sRegion" v-model="region" :column="2" :searchtIcon="true" placeholder="搜索热门城市"/>-->
<!--              <input placeholder="搜索热门城市" class="input-s"/>-->
<!--              <image :src="$Config.get('imageUrl')+'/data/search.png'" class="search-icon"/>-->
            </view>
            <view class="chart">
              <l-echart ref="chart6" ></l-echart>
              <view class="customTooltips" :style="{left: chart6.position[0] + 'px',top: chart6.position[1] + 'px'}" v-if="chart6.params && chart6.position.length">
                <view>
                  <view class="l1">{{chart6.params.name}}{{chart6.params.data.date}}{{getTableHeader(filter1)}}营收数据</view>
                  <view v-if="!isNaN(chart6.params.value)"><span>{{getNumber1(chart6.params.data.value)}}</span></view>
                </view>
              </view>
            </view>
            <view class="table">
              <view class="table-head">
                <view class="table-head-item w50">&nbsp;</view>
                <view class="table-head-item w80">城市</view>
                <view class="table-head-item w160">本{{getTableHeader(filter1)}}累计营收数据</view>
                <view class="table-head-item w20">&nbsp;</view>
              </view>
              <view class="table-body">
                <view class="table-row" v-for="(item, index) in countryTableData" :key="index" @click="goDetail(item)">
                  <view class="w50">
                    <image :src="$Config.get('imageUrl')+'/data/i5.png'" class="table-img "/>
                  </view>
                  <view class="table-city w80">{{ item.cityName }}</view>
                  <view class="table-number w160">{{ item.totalRevenue }}</view>
                  <text class="iconfont icon-right w20"></text>
                </view>
              </view>
            </view>
          </view>
          <view class="box">
            <view class="title">总营收分配</view>
            <view class="chart" style="width: 400rpx;height:400rpx;margin: 0 auto;margin-top:40rpx;">
              <l-echart ref="chart4" ></l-echart>
            </view>
            <view class="allocation">
              <view class="item" v-for="(item,i) in detailByDistributionData" :key="i">
                <view class="num">{{ getNumber1(item.useAmount) }}</view>
                <view class="name" :class="'c'+(1+i)">{{ item.purpose }}</view>
              </view>
<!--              <view class="item">-->
<!--                <view class="num">1000</view>-->
<!--                <view class="name c2">市场品牌推广</view>-->
<!--              </view>-->
<!--              <view class="item">-->
<!--                <view class="num">1000</view>-->
<!--                <view class="name c3">运营成本</view>-->
<!--              </view>-->
<!--              <view class="item">-->
<!--                <view class="num">1000</view>-->
<!--                <view class="name c4">基金投资</view>-->
<!--              </view>-->
<!--              <view class="item">-->
<!--                <view class="num">1000</view>-->
<!--                <view class="name c5">市场品牌推广</view>-->
<!--              </view>-->
<!--              <view class="item">-->
<!--                <view class="num">1000</view>-->
<!--                <view class="name c6">交易所投资</view>-->
<!--              </view>-->
<!--              <view class="item">-->
<!--                <view class="num">1000</view>-->
<!--                <view class="name c7">利润池-收购酒厂</view>-->
<!--              </view>-->
            </view>
          </view>
        </view>
        <view v-show="current === 1">
          <view class="filter">
            <view class="item" :class="{'active' : filter2 == 4}" @click="filter2Click(4)">每日</view>
            <view class="item" :class="{'active' : filter2 == 3}" @click="filter2Click(3)">月份</view>
            <view class="item" :class="{'active' : filter2 == 2}" @click="filter2Click(2)">季度</view>
            <view class="item" :class="{'active' : filter2 == 1}" @click="filter2Click(1)">年度</view>
          </view>
<!--          <view class="box box1 cost">-->
<!--            <view class="title">酒厂成本统计</view>-->
<!--            <view class="list">-->
<!--              <view class="item">-->
<!--                <view class="t">-->
<!--                  酒厂原材料成本(税后)-->
<!--                </view>-->
<!--                <view class="num">-->
<!--                  2482-->
<!--                </view>-->
<!--                <image :src="$Config.get('imageUrl')+'/data/i1.png'" class="cost-img"/>-->
<!--              </view>-->
<!--              <view class="item">-->
<!--                <view class="t">-->
<!--                  酒厂出厂成本(税后)-->
<!--                </view>-->
<!--                <view class="num">-->
<!--                  3528-->
<!--                </view>-->
<!--                <image :src="$Config.get('imageUrl')+'/data/i2.png'" class="cost-img"/>-->
<!--              </view>-->
<!--            </view>-->
<!--            <button class="upload" @click="chooseImage(0)" style="margin-top: 40rpx;">-->
<!--              <image :src="$Config.get('imageUrl')+'/data/upload.png'" class="upload-img"/>-->
<!--              <span class="txt">文件上传</span>-->
<!--            </button>-->
<!--            <view class="fileList">-->
<!--              <view class="file" v-for="(item,i) in files[0]" :key="i">-->
<!--                <view class="label">{{ getFileName(item.path) }}</view>-->
<!--                <image @click="delFile(item,i,0)" :src="$Config.get('imageUrl')+'/data/delete.png'" class="fileDel"/>-->
<!--              </view>-->
<!--            </view>-->
<!--          </view>-->
          <view class="box box1">
            <view class="title">出厂成本、销售公司成本(税后)</view>
            <view class="chart">
              <l-echart ref="chart5" ></l-echart>
              <view class="customTooltips" :style="{left: chart5.position[0] + 'px',top: chart5.position[1] + 'px'}" v-if="chart5.params.length && chart5.position.length">
                <view v-for="(item,index) in chart5.params" :key="index">
                  <view>
                    <view class="l1">{{item.axisValue}}{{getTableHeader(filter2)}}{{ item.seriesName }}</view>
                    <view><span>{{getShowNumber(item.value)}}</span></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="box box1">
            <view class="tax">
              <view class="info">
                <view class="il1">销售公司所有税务数据</view>
                <view class="il2">{{ getNumber1(taxNumber) }}</view>
              </view>
              <view class="t-img">
                <image :src="$Config.get('imageUrl')+'/data/i3.png'"  class="image"/>
              </view>
            </view>
<!--            <button class="upload" @click="chooseImage(1)">-->
<!--              <image :src="$Config.get('imageUrl')+'/data/upload.png'"  class="upload-img"/>-->
<!--              <span class="txt">文件上传</span>-->
<!--            </button>-->
<!--            <view class="fileList">-->
<!--              <view class="file" v-for="(item,i) in files[1]" :key="i">-->
<!--                <view class="label">{{ getFileName(item.path) }}</view>-->
<!--                <image @click="delFile(item,i,1)" :src="$Config.get('imageUrl')+'/data/delete.png'" class="fileDel"/>-->
<!--              </view>-->
<!--            </view>-->
          </view>
          <view class="box box1" >
            <view class="tax" >
              <view class="info">
                <view class="il1">全国市场统一定价</view>
              </view>
            </view>
            <view class="swiper-table">
              <swiper class="swiper-box" :circular="false" @change="_bindChange">
                <swiper-item >
                  <view class="table">
                    <view class="table-head">
                      <view class="table-head-item w80">产品</view>
                      <view class="table-head-item w160">销售市场价(元)</view>
                      <view class="table-head-item w160">统一市场价(元)</view>
                    </view>
                    <view class="table-body">
                      <view class="table-row" v-for="(item, index) in tableData1" :key="index">
                        <view class="table-city w80">{{ item.city }}</view>
                        <view class="table-number w160">{{ item.number }}</view>
                        <view class="table-number w160">{{ item.number1 }}</view>
                      </view>
                    </view>
                  </view>
                </swiper-item>
                <swiper-item >
                  <view class="table">
                    <view class="table-head">
                      <view class="table-head-item w100">酒厂成本<br>（含税）</view>
                      <view class="table-head-item w160">销售公司成本<br>（含税）</view>
                      <view class="table-head-item w160">销售公司<br>统一毛利率</view>
                    </view>
                    <view class="table-body">
                      <view class="table-row" v-for="(item, index) in tableData2" :key="index">
                        <view class="table-number w100" style="padding-left: 0">{{ item.city }}</view>
                        <view class="table-number w160" style="padding-left: 0">{{ item.number }}</view>
                        <view class="table-number w160" style="padding-left: 0">{{ item.number1 }}</view>
                      </view>
                    </view>
                  </view>
                </swiper-item>
              </swiper>
              <view class="indicator-dots rectangle">
                <view class="dots-item" :class="{ active: dotCurrent == 0 }" ></view>
                <view class="dots-item" :class="{ active: dotCurrent == 1 }" ></view>
              </view>
            </view>
<!--            <view class="table-content" >-->
<!--                <view class="table1">-->
<!--                  <view class="table-body">-->
<!--                    <view class="table-column" v-for="(item, index) in tableData" :key="index">-->
<!--                      <view class="table-city w80">-->
<!--                        <view>{{ item.city }}</view>-->
<!--                        <view v-if="item.city1">{{ item.city1 }}</view>-->
<!--                      </view>-->
<!--                      <view class="table-number w160">{{ item.number1 }}</view>-->
<!--                      <view class="table-number w160">{{ item.number2 }}</view>-->
<!--                      <view class="table-number w160">{{ item.number3 }}</view>-->
<!--                      <view class="table-number w160">{{ item.number4 }}</view>-->
<!--                      <view class="table-number w160">{{ item.number5 }}</view>-->
<!--                    </view>-->
<!--                  </view>-->
<!--                </view>-->
<!--            </view>-->
          </view>
        </view>
      </view>
    <u-popup :show="show" closeable round="24rpx" mode="center" @close="show=false">
      <view class="popup">
        <view class="title">计算规则</view>
        <view class="content" v-if="showIndex == 0">
          <view>从12月1号开始，酒厂自身的销售营收每年11月30号统计汇总完成，酒厂净利润51%归属销售公司年终分红（加上发展资金年终结余的30%）；当前数据为销售公司独立统计数据。</view>
          <view style="margin-top: 40rpx">总营收=商城销售营收+招商营收</view>
        </view>
        <view class="content" v-if="showIndex == 1">
          <view>总利润=总营收（100%）-总成本（48.08%）-总营销费用（15%）- 销售公司总税务（7.02%）=总净利润（29.90%）</view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
// import SelectRegion from '@/page_work/address/select-region/select-region'
import dataMixin from './data.mixins'
  export default {
    // components: {
    //   SelectRegion
    // },
		data() {
			return {
        show:false,
        showIndex:0,
        items: ['营收数据', '成本数据'],
        current: 0,
        dotCurrent: 0,
        tableData:[
          {
            city:'产品',
            number1:'宝洞5',
            number2:'宝洞10',
            number3:'宝洞15',
            number4:'宝洞20',
            number5:'宝洞30',
          },{
            city:'股东采购价(元)',
            number1:'105.8',
            number2:'182',
            number3:'283',
            number4:'599',
            number5:'955',
          },{
            city:'全国市场统一定价',
            // city1:'（出厂成本（含税，物流）',
            number1:'229',
            number2:'389',
            number3:'599',
            number4:'1299',
            number5:'2059',
          },{
            city:'酒厂成本（含税）',
            number1:'50',
            number2:'86',
            number3:'134',
            number4:'286',
            number5:'450',
          },{
            city:'销售公司成本（含税）',
            number1:'57.254',
            number2:'98.48',
            number3:'153.37',
            number4:'326.69',
            number5:'515.65',
          },{
            city:'销售公司统一毛利率',
            number1:'85%',
            number2:'85%',
            number3:'85%',
            number4:'85%',
            number5:'85%',
          }
        ],
        tableData1:[
          {
            city:'宝洞5',
            number:'105.8',
            number1:'229',
          },{
            city:'宝洞10',
            number:'182',
            number1:'389',
          },{
            city:'宝洞15',
            number:'283',
            number1:'599',
          },{
            city:'宝洞20',
            number:'599',
            number1:'1299',
          },{
            city:'宝洞30',
            number:'955',
            number1:'2059',
          }
        ],
        tableData2:[
          {
            city:'50',
            number:'57.254',
            number1:'85%',
          },{
            city:'86',
            number:'98.48',
            number1:'85%',
          },{
            city:'134',
            number:'153.37',
            number1:'85%',
          },{
            city:'286',
            number:'326.69',
            number1:'85%',
          },{
            city:'450',
            number:'515.65',
            number1:'85%',
          }
        ],
        filter1:4,
        filter2:4,
        isShop:true, // true 招商 false 商城
        region:[],
        agencyData:[],//商城总营收 总利润
        searchCityId:'',
        files: [[],[]],
        taxNumber:0
			}
		},
    mixins: [dataMixin],
    watch: {
      filter1(val) {
        this.loadChart1(true)
      },
      filter2(val) {
        this.loadChart2(true)
      },
      region(val){
        this.searchCityId = val[1].id;
        this.detailByCity(val[1].id)
      }
    },
    async mounted() {
    },
    onShow(){
      this.init();
    },
		methods: {
      showPopup(index){
        this.show = true;
        this.showIndex = index;
      },
      init(){
        this.loadChart1();
      },
      onClickItem(currentIndex) {
        if (this.current !== currentIndex) {
          this.current = currentIndex;
          if(this.current === 1){
            this.loadChart2();
          }
        }
      },
      filter1Click(index){
        this.filter1 = index;
      },
      filter2Click(index){
        this.filter2 = index;
      },
      chanageShopType(val){
        this.isShop = val;
        if(this.isShop){
          this.getChart3Option(this.revenueData);
        }else{
          let data = [
            {
              batchNo: '2023-11',
              totalRevenue: 0,
              totalNetProfit: 0,
            }
          ]
          if(this.agencyData.length > 0){
            data = this.agencyData;
          }
          this.getChart3Option(data,true);
        }
      },
      goDetail(item){
        this.$navTo('page_work/dataDetail/list', item)
      },
      _bindChange(e) {
        this.dotCurrent = e.detail.current;
      },
		}
	}
</script>

<style lang="scss" scoped>
.container{
  width: 750rpx;
  background: #F7F7F7;
  padding-bottom: 1rpx;

  .head{
    height: 400rpx;
    color: #FFF;
    position: relative;
    overflow: hidden;
    .bg{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    .tabs{
      height:70rpx;
      width: 60%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      .item{
        color: #FFF !important;
        border: 0 !important;
        font-weight: 500;
        font-size: 36rpx;
        height:100%;
      }
      .active{
        position: relative;
        font-size: 40rpx;
        font-weight: bold;
        &::before{
          content: '';
          position: absolute;
          bottom: -8rpx;
          left: 50%;
          transform: translateX(-50%);
          height: 12rpx;
          width: 64rpx;
          border-radius: 10rpx;
          background: #FFF;
        }
      }
    }
  }
  .content{
    padding: 0 40rpx;
    margin-top: -280rpx;
    position: relative;
    .filter{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14rpx;
      position: relative;
      margin-bottom: 40rpx;
      .item{
        border-radius: 6rpx;
        border: solid 1px #FFF;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #FFF;
        padding: 0 36rpx;
        background: rgba(255,255,255,0.32);
      }
      .active{
        border: solid 1px #1777FF;
        font-weight: 500;
        color: #1777FF;
        background: #E2F0FC;
      }
    }
    .box{
      background: #FFF;
      border-radius: 10rpx;
      padding:  40rpx;
      margin-bottom: 40rpx;

      .arrow{
        color: #1777FF;
      }
      .title{
        font-weight: bold;
        color: #010812;
        font-size: 32rpx;
        padding-left: 20rpx;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap:10rpx;
        &::after{
          content: '';
          position: absolute;
          left:0;
          top:6rpx;
          height: 32rpx;
          width:8rpx;
          border-radius: 8rpx;
          background: #1777FF;
        }
      }
      .btns{
        display: flex;
        align-items: center;
        gap:32rpx;
        .btn{
          height: 80rpx;
          width: 176rpx;
          border-radius: 10rpx;
          background: #ECECEC;
          font-weight: 500;
          color: #999999;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .btn-active{
          color: #FFFFFF;
          background: #1777FF;
        }
      }
      .chart{
        width: 100%;
        height: 500rpx;
        margin-top: 40rpx;
        position: relative;
        .customTooltips {
          position: absolute;
          z-index: 1;
          background: #FFF;
          padding: 20rpx;
          border: 1px solid rgba(23,119,255,0.2);
          border-radius: 10rpx;
          .l1{
            padding-left: 30rpx;
            position: relative;
            font-size: 24rpx;
            &::before{
              content: '';
              position: absolute;
              left: 0;
              top: 14rpx;
              width: 16rpx;
              height: 16rpx;
              border-radius: 50%;
              background: #1777FF;
            }
          }
          .l2{
            padding-left: 30rpx;
            position: relative;
            font-size: 24rpx;
            &::before{
              content: '';
              position: absolute;
              left: 0;
              top: 14rpx;
              width: 16rpx;
              height: 16rpx;
              border-radius: 50%;
              background: #F7BA1E;
            }
          }
          span{
            font-size: 40rpx;
            font-weight: bold;
            color: #010812;
            margin-right: 10rpx;
            margin-left: 30rpx;
          }
        }
      }
      .chartList{
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 40rpx;
        .item {
          width: 100%;
          margin-bottom: 20rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap:20rpx;
          .icon{
            width: 32rpx;
            height: 32rpx;
            image{
              width: 100%;
              height: 100%;
            }
          }
          .name{
            width: 100rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #4F4F4F;
            text-align-last: justify;
          }
          .chart{
            height: 100%;
            width: 440rpx;
            margin: 0;
          }
        }
      }
      .allocation{
        margin-top:40rpx;
        //display: grid;
        //grid-template-columns: 1fr 1fr;
        //grid-row-gap: 40rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 60rpx;
        .item{
          //margin-top:40rpx;
          .num{
            font-size: 40rpx;
            font-weight: bold;
            color: #010812;
            margin-bottom: 20rpx;
          }
          .name{
            font-size: 32rpx;
            font-weight: 500;
            color: #010812;
            position: relative;
            padding-left: 40rpx;
            &::before{
              content: '';
              position: absolute;
              left: 0;
              top: 10rpx;
              width: 20rpx;
              height: 20rpx;
              border-radius: 50%;
              background: #165DFF;
            }
          }
          .c2::before{
              background: #FF8D1F;
          }
          .c3::before{
            background: #7B3DD1;
          }
          .c4::before{
            background: #469AFA;
          }
          .c5::before{
            background: #F7BA1E;
          }
          .c6::before{
            background: #D92ED9;
          }
          //.c7::before{
          //  background: #F7BA1E;
          //}
        }
      }
    }
    .box1{
      .title{
        padding-left: 0rpx;
        &::after{
          display: none;
        }
      }
    }
    .cost{
      .list{
        display:flex;
        align-items: center;
        justify-content: space-between;
        gap:20rpx;
        margin-bottom: 40rpx;
        margin-top: 20rpx;
        .item{
          display: flex;
          flex-direction: column;
          flex-grow: 1;
          flex-basis: 0;
          padding: 30rpx 20rpx;
          background: #F7F7F7;
          border-radius: 10rpx;
          position: relative;
          .t{
            color: #010812;
            margin-bottom: 20rpx;
            font-size: 24rpx;
            padding-left: 14rpx;
            position: relative;
            font-weight: 500;
            &::after{
              content:'';
              position: absolute;
              left: 0;
              top: 4rpx;
              width:4rpx;
              height:24rpx;
              border-radius: 4rpx;
              background: #1777FF;
            }
          }
          .num{
            font-size: 40rpx;
            font-weight: bold;
            color: #010812;
            text-align: left;
            width: 200rpx;
            overflow: hidden;
          }
          .cost-img{
            position: absolute;
            right: 20rpx;
            bottom: 20rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }
      }
    }
    .tax{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 40rpx;
      .info{
        color: #010812;
        .il1{
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
        }
        .il2{
          font-size: 40rpx;
          font-weight: bold;
        }
      }
      .t-img{
        width: 88rpx;
        height: 88rpx;
        .image{
          width: 100%;
          height: 100%;
        }
      }
    }
    .upload{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      background: rgba(23, 119, 255, 0.05);
      border-radius: 10rpx;
      height: 80rpx;
      .upload-img{
        width: 36rpx;
        height: 36rpx;
      }
      .txt{
        font-size: 28rpx;
        font-weight: 500;
        color: #1777FF;
      }
      &::after{
        display: none;
      }
    }
    .fileList{
      .file{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20rpx;
        padding:14rpx 0;
        .label{
          font-size: 28rpx;
          font-weight: 500;
          color: #010812;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .fileDel{
          width: 32rpx;
          height: 32rpx;
          image{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .revenue{
      background: rgba(23, 119, 255, 0.1);
      border-radius: 10rpx;
      padding: 40rpx 20rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap:20rpx;
      margin-top: 40rpx;
      .r-img{
        width: 110rpx;
        height: 110rpx;
      }
      .detail{
        color: #010812;
        .dl1{
          font-size: 28rpx;
          font-weight: 500;
          margin-bottom: 20rpx;
        }
        .dl2{
          font-size: 40rpx;
          font-weight: bold;
        }
      }
    }
    .search{
      background: #F7F7F7;
      border-radius: 10rpx;
      position: relative;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      .input-s{
        padding: 20rpx;
        font-size: 28rpx;
      }
      /deep/ .field-value{
        line-height: 80rpx;
        padding: 20rpx;
        font-size: 28rpx;
        height: 80rpx;
        background: #F7F7F7;
        color: #949393;
        .icon{
          top:30rpx;
        }
      }
      .search-icon{
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        width: 32rpx;
        height: 32rpx;
      }
    }
    .table{
      .table-head{
        background: #F7F7F7;
        font-size: 28rpx;
        color: #010812;
        border-radius: 10rpx 10rpx 0px 0px;
        display: flex;
        height: 88rpx;
        align-items: center;
        justify-content: flex-start;
        gap:20rpx;
        .table-head-item{
          font-size: 28rpx;
          font-weight: 500;
          color: #010812;
          padding: 10rpx 0;
          text-align: center;
        }
      }
      .w50{
        width: 100rpx;
        text-align: center;
      }
      .w80{
        width: 160rpx;
      }
      .w100{
        width: 200rpx;
      }
      .w160{
        width: 320rpx;
      }
      .w20{
        width: 40rpx;
      }
      .table-body{
        .table-row{
          height: 88rpx;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap:20rpx;
        }
      }
      .table-img{
        width: 48rpx;
        height: 48rpx;
      }
      .table-city{
        text-align: center;
        font-size: 28rpx;
        font-weight: 500;
        color: #010812;
      }
      .table-number{
        text-align: center;
        font-size: 40rpx;
        font-weight: bold;
        color: #010812;
        padding-left: 40rpx;
        box-sizing: border-box;
      }
      .iconfont{
        font-size: 32rpx;
        color: #010812;
        font-weight: bold;
      }
    }

    .table-content{
      width: 100%;
      overflow-x: scroll;
    }
    .table1{
      overflow-x: auto;
      .table-body{
        display: flex;
        .table-column{
          display: flex;
          flex-direction: column;
          white-space: nowrap;
          text-align: center;
          //第一个table-column
          &:first-child{
            .table-city,.table-number{
              font-size: 28rpx;
              font-weight: 500;
              color: #010812;
              white-space: nowrap;
            }

          }
          .table-city{
            background: #F7F7F7;
            font-size: 28rpx;
            color: #010812;
            padding: 20rpx;
            height: 80rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .table-number{
            font-size: 40rpx;
            font-weight: bold;
            color: #010812;
            box-sizing: border-box;
            height: 80rpx;
            line-height: 80rpx;
          }
        }
      }
    }
    .swiper-table{
      position: relative;
      .swiper-box{
        height: 600rpx;
      }
      /* 指示点 */
      .indicator-dots {
        //width: 100%;
        height: 28rpx;
        padding: 0 20rpx;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20rpx;
        opacity: 0.8;
        display: flex;
        justify-content: center;

        .dots-item {
          width: 16rpx;
          height: 16rpx;
          background-color: #D9D9D9;
          &:first-child {
            border-radius: 6rpx 0 0 6rpx;
          }
          &:last-child {
            border-radius: 0 6rpx 6rpx 0;
          }

          &.active {
            background-color: #1777FF !important;
          }
        }

        // 圆形
        &.round .dots-item {
          width: 16rpx;
          height: 16rpx;
          border-radius: 20rpx;
        }

        // 正方形
        &.square .dots-item {
          width: 16rpx;
          height: 16rpx;
        }

        // 长方形
        &.rectangle .dots-item {
          width: 32rpx;
          height: 10rpx;
        }
      }
    }

  }
  .popup{
    padding:34rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #4D4D4D;
    line-height: 48rpx;
    box-sizing: border-box;
    width: 600rpx;
    margin: 0 auto;
    .title{
      font-size: 32rpx;
      font-weight: 500;
      color: #000000;
      text-align: center;
      margin-bottom: 50rpx;
    }
    .content{
      margin: 50rpx 0;
    }
  }
}
</style>
